<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <input type="button" value="加载user" onclick="sendAjax1()">
    <input type="button" value="加载user" onclick="sendAjax2()">
    <input type="button" value="加载user" onclick="sendAjax3()">
    <script>
        /*  
        ajax状态监控
         xhr.onreadystatechange 该属性定义的回调会自动监控ajax状态变化，完成方法执行
         ajax的状态由5种状态组成，通过xhr.readyState可以获取当前ajax所处的状态
             0：用于异步请求的XMLHttpRequest对象构建完成(new实例对象)
             1：调用了XMLHttpRequest对象的初始化设置方法(open方法的调用)
             2：调用了XMLHttpRequest对象的发送方法(send方法的调用)(请求响应过程正常)
             3：对响应的数据进行解析，且解析正常
             4：ajax完成请求逻辑-响应结束(a.正常结果 b.异常结果)
         
         
         */
        function sendAjax1() {
            let xhr = new XMLHttpRequest();
            console.log(xhr.readyState);
            //将onreadystatechange放置在open方法的前面，监控的ajax的状态变化:1 2 3 4，如果放在send的前面，监控的2  3  4
            xhr.onreadystatechange = function () {
                console.log("ajax的状态发生了变化:", xhr.readyState)
            };
            xhr.open("get", "/user");
            xhr.send();

        }

        function sendAjax2() {
            let readyStateCode = null;
            let xhr = new XMLHttpRequest();//0实例对象构建完成
            readyStateCode = 0;
            xhr.onreadystatechange = function () {
                console.log(xhr.readyState, "====");
                if (xhr.readyState == 4 && readyStateCode != 3) {
                    console.log("网络错误-onerror");
                } else if (xhr.readyState == 4 && readyStateCode == 3) {
                    console.log("请求成功-onload");
                } else {
                    readyStateCode = xhr.readyState;//readyStateCode=1  readyStateCode=2  readyStateCode=3
                }
            };
            xhr.open("get", "/user");//1
            xhr.send();
        }

        /* 
                异常2：应用层逻辑异常，ajax状态过程是正常，但是响应结果是异常的(http状态码异常)
                ajax状态0~4未出现异常，但是服务器返回的http状态码告知，服务器对请求处理无法完成，应用层错误
                xhr.statusText 返回一个文本信息，其中包含 HTTP 服务器返回的响应状态文本
                xhr.status 返回一个请求响应状态数字，代表请求的响应状态。 */
        function sendAjax3() {
            let readyStateCode = null;
            let xhr = new XMLHttpRequest();//0实例对象构建完成
            readyStateCode = 0;
            xhr.onreadystatechange = function () {
                console.log(xhr.readyState, "====");
                if (xhr.readyState == 4 && readyStateCode != 3) {
                    console.log("网络错误-onerror");
                } else if (xhr.readyState == 4 && readyStateCode == 3) {
                    if (xhr.status >= 200 && xhr.status < 300) {
                        console.log("请求成功",xhr.statusText,xhr.responseText);
                    } else if (xhr.status >= 400 && xhr.status < 500) {
                        console.log("请求成功,服务器对该资源操作受限(资源不存在)",xhr.statusText,xhr.responseText);
                    } else if (xhr.status >= 500 && xhr.status < 600) {
                        console.log("请求成功,服务器内部执行代码错误",xhr.statusText,xhr.responseText)
                    }else{
                        console.log("请求成功，不支持ajax");
                    }
                } else {
                    readyStateCode = xhr.readyState;//readyStateCode=1  readyStateCode=2  readyStateCode=3
                }
            };
            xhr.open("get", "/serviceError");//1
            xhr.send();
        }

    </script>
</body>

</html>